<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>bootstrap表格</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../plugin/bootstrap-table/bootstrap-table.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../system/css/common.css" />
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition sidebar-mini gray-bg">
<div class="wrapper">
    <section class="content">
		  <div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header">
					  <h3 class="box-title">BootstrapTable基础表格</h3>
					</div>
					<div class="box-body">
						<table id="exampleTableFromData" data-mobile-responsive="true">
							<thead>
								<tr>
									<th data-field="Tid">ID</th>
									<th data-field="First">姓名</th>
									<th data-field="sex">性别</th>
									<th data-field="Score">评分</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			  
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">BootstrapTable动态表格</h3>
					</div>
					<div class="box-body">
						<table id="table"></table>
					</div>
				</div>
			</div>
		</div>
    </section>
	<div class="control-sidebar-bg"></div>
</div>

<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
<script>
	$(function () {
		var bt_data = [{
		  "Tid": "1",
		  "First": "张三丰",
		  "sex": "男",
		  "Score": "50"
		}, {
		  "Tid": "2",
		  "First": "张无忌",
		  "sex": "男",
		  "Score": "94"
		}, {
		  "Tid": "3",
		  "First": "张翠山",
		  "sex": "男",
		  "Score": "80"
		}, {
		  "Tid": "4",
		  "First": "宋青书",
		  "sex": "男",
		  "Score": "67"
		}, {
		  "Tid": "5",
		  "First": "殷素素",
		  "sex": "女",
		  "Score": "100"
		}, {
		  "Tid": "6",
		  "First": "周芷若",
		  "sex": "女",
		  "Score": "77"
		}, {
		  "Tid": "7",
		  "First": "赵敏",
		  "sex": "女",
		  "Score": "87"
		}];

		$('#exampleTableFromData').bootstrapTable({
		  data: bt_data,
		});

		$("#table").bootstrapTable({
			url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data', //请求后台的URL（*）
			contentType: "application/x-www-form-urlencoded",//用post请求，这个是必须条件，必须加上，get可以不用，亲测
			dataType: "json",
			method: "get",//请求方式（*）
			//toolbar: '#toolbar', //工具按钮用哪个容器
			undefinedText: "-", /*为undefiend时显示的字*/
			striped: false, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortable: false, //是否启用排序
			sortOrder: "asc", //排序方式
			sortName: "", //排序方式
			toolbar: '', // 指定工作栏
			loadingFontSize: 13, // 自定义加载文本的字体大小
			//search: true, //是否使用客户端搜索
			queryParams: queryInitParams,//传递参数（*）
			responseHandler: responseHandler,
			queryParamsType: "limit",
			sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 10, //每页的记录行数（*）
			pageList: [10, 20, 50, 999], //可供选择的每页的行数（*）
			showColumns: false, //是否显示所有的列
			showRefresh: false, //是否显示刷新按钮
			minimumCountColumns: 2, //最少允许的列数
			clickToSelect: true, //是否启用点击选中行
			strictSearch: true,
			//height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			showToggle: false, //是否显示详细视图和列表视图的切换按钮
			uniqueId: "id", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表
			showExport: false, //是否显示导出
			exportDataType: 'basic', //'basic', 'all', 'selected'.
			escape: true,//html转意
			// align: "center",
			columns: [
				[{
				  field: 'state',
				  checkbox: true,
				  rowspan: 2,
				  align: 'center',
				  valign: 'middle'
				}, {
				  title: 'Item ID',
				  field: 'id',
				  rowspan: 2,
				  align: 'center',
				  valign: 'middle',
				  sortable: true,
				  footerFormatter: totalTextFormatter
				}, {
				  title: 'Item Detail',
				  colspan: 3,
				  align: 'center'
				}],
				[{
				  field: 'name',
				  title: 'Item Name',
				  sortable: true,
				  footerFormatter: totalNameFormatter,
				  align: 'center'
				}, {
				  field: 'price',
				  title: 'Item Price',
				  sortable: true,
				  align: 'center',
				  footerFormatter: totalPriceFormatter
				}, {
				  field: 'operate',
				  title: 'Item Operate',
				  align: 'center',
				  clickToSelect: false,
				  events: window.operateEvents,
				  formatter: operateFormatter
				}]
			],//表格列
			onLoadSuccess: tableLoadSuccess, //成功渲染回调
		});
		/* 表格查询参数 */
		function queryInitParams(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
				limit: params.limit, //页面大小
				offset: params.offset ,//页码
				search: '',
			};
			return temp;
		}
		/* 表格加载成功事件 */
		function tableLoadSuccess(data) {
			$(".bs-checkbox").css('vertical-align','middle');
		}
		function responseHandler(data) {
			return data;
		}
		/* 刷新表格 */
		function refreshTable(tableId) {
			$("#tableId").bootstrapTable('refresh');
		}
		/* 根据data选中数据 */
		function checkTableBy(id, data) {
			$(id).bootstrapTable("checkBy", data)
		}
		/*根据uniqueId获取所选列*/
		function getRowByUniqueId(id, val) {
			return $(id).bootstrapTable("getRowByUniqueId", val);
		}
		/*table数据单选*/
		function selectSingleData(id){
			var selectContent = $(id).bootstrapTable('getSelections');
			if(typeof(selectContent) == 'undefined' || selectContent == "") {
				toastr.error("请先选择一条数据!");
				return false;
			}else if(selectContent.length > 1){
				toastr.error("只能选择一条数据!");
				return false;
			}else{
				var selectData = selectContent[0];
				return selectData;
			}
		}
		/*table数据多选*/
		function selectMutiData(id){
			var checkedRows= $(id).bootstrapTable('getSelections');
			if(checkedRows.length==0){
				toastr.error("请先选择一条数据！");
				return false;
			}else{
				return checkedRows;
			}
		}

		window.operateEvents = {
			'click .like': function (e, value, row, index) {
			  alert('You click like action, row: ' + JSON.stringify(row))
			},
			'click .remove': function (e, value, row, index) {
			  $table.bootstrapTable('remove', {
				field: 'id',
				values: [row.id]
			  })
			}
		}

		function totalTextFormatter(data) {
			return 'Total'
		}

		function totalNameFormatter(data) {
			return data.length
		}

		function totalPriceFormatter(data) {
			var field = this.field
			return '$' + data.map(function (row) {
			  return +row[field].substring(1)
			}).reduce(function (sum, i) {
			  return sum + i
			}, 0)
		}

		function operateFormatter(value, row, index) {
			return [
				'<a class="like" href="javascript:void(0)" title="Like">',
				'<i class="fa fa-heart"></i>',
				'</a>  ',
				'<a class="remove" href="javascript:void(0)" title="Remove">',
				'<i class="fa fa-trash"></i>',
				'</a>'
			].join('')
		}
	  
	})
</script>
</body>
</html>
